<style>
button.big-button {
    width: 100%;
    cursor: pointer;
    padding: 20px;
    text-decoration: none;
    background-color: #cc7;
}
button{
    background-color: #cc5;
}
.dirError{
    color: #500;
    font-weight:bold;
}
</style>
<script>
    var projects = {};
    
    /*var extraItemCommands = ria.getExtraItemCommands(['submit','callRemove','remove','showFormError']);
    spec.ds.testsDirClass = spec.ds.tests_dir_exists ? 'dirFound' : 'dirNotFound';
    spec.ds.resultsDirClass = spec.ds.tests_result_dir_exists ? 'dirFound' : 'dirNotFound';
    }
    extraItemCommands.setActual = function(spec, json) {
        JsonC.callSfAction('projects/setActual',{id:json.id});
    }*/

    $(document).ready(function() {
        // DEFINE OS DADOS QUE SERÃO USADOS PELA LISTA
        projects.data = <?php echo json_encode($projects) ?>;
        // 
        projects.newItem = ria.buildItem()
        .setJsObjName('projects.newItem')
        .setDs(<?php $p = new Project(); echo json_encode($p->toArray()) ?>)
        .setTpls({
            view: "<?php echo $projectViewTpl ?>",
            form: "<?php echo $projectFormTpl ?>"
        })
        .setDecorators({
            edit: "<?php echo $editDecorator ?>",
            insert: "<?php echo $insertDecorator ?>"
        })
        .setViews({
            view:   {tpl:'view'},
            edit:   {tpl:'form',decorator:'edit'},
            insert: {tpl:'form',decorator:'insert'}
        })
        .setExtraTplValue('_objRequestName','project')
        .setExtraTplValue('_formId','form-new-project')
        .setActualView('insert')
        .bind('postDisplay', function(spec){
            if(!spec.ds.tests_dir_exists) {
                $('#testsDirError' + spec.ds.id).show();
            }
            if(!spec.ds.tests_result_dir_exists) {
                $('#testsResultsDirError'+spec.ds.id).show();
            }

            var selector = '#' + spec.extraTplValues._formId + " :checkbox.checktrue";
            $(selector).attr("checked",true);
        });

        // DUPLICA CONFIGURAÇÕES DO NOVO ITEM PARA USAR COMO ITEM DA LISTA.
        var listItem = projects.newItem.copy();

        // ADICIONA COMANDOS AO ITEM NOVO E AO ITEM QUE VAI SERVIR A LISTA.
        ria.addItemCommands(
            [listItem, projects.newItem],
            {
                insertAction:'projects/insert',
                editAction:'projects/edit',
                removeAction:'projects/remove'
            }
        );

        // COMANDOS EXTRAS SÓ DO ITEM DA LISTA.
        listItem.addCommand( 'setActual', function(spec, json) {
            JsonC.callSfAction('projects/setActual', {id:spec.ds.id});
        }).addCommand( 'export', function(spec, json) {
            UtilC.sfRedirect({ path : 'projects/export' , parameters : {id:spec.ds.id} });
        }).addCommand( 'import', function(spec, json) {
            JsonC.submitForSfAction('projects/import',{},'form-project-import-' + spec.ds.id);
        });

        // CRIA E MOSTRA A LISTA
        projects.list = ria.buildList()
        .setJsObjName('projects.list')
        .setDs({listId:"project-list"})
        .setItemId('project-list-item-')
        .setItemsDs(projects.data)
        .setElement($('#local'))
        .setRiaObject(listItem.setActualView('view'))
        .setExtraItemTplValues({
            _jsObjName : 'projects.list.getItem(${dsId})',
            _objRequestName : 'project',
            _formId : 'form-project-${dsId}'
        })
        .setTpls({list: "<?php echo $listTpl ?>"})
        .setItemDecorators({div: "<?php echo $divListItemDecorator ?>"})
        .setViews({list:  {tpl:'list',itemDecorator:'div'}})
        .display('list');
        ria.addListCommands([projects.list]);
    });
</script>

<style>
    .dirFound{
        background-color: #beb;
    }
    .dirNotFound{
        background-color: #ebb;
    }
</style>
<h3>Projects</h3>
<button type='button' onclick="projects.newItem.showOnDialog({view:'insert'})"/>create a new project</button>
<div id='local'></div>